div{
width:400px;
height: 60px;
background-color: yellow;
color:red;
}
@keyframes move {
0%{
background-color:yellow;
}
33%{
transform:translate(500px);
left:1550px;
}
66%{
transform:rotate(180deg);
}
100%{
background-color:purple;
}
}
.animate{
animation-name: move;
animation-duration: 5s;
animation-iteration-count: infinite;
}
| <link rel="stylesheet" type="text/css" href="style2.css"/> | |
| </head> | |
| <body> | |
| <script> | |
| function startAnimation() | |
| { | |
| var x = document.getElementById("x1"); | |
| x.classList.add("animate"); | |
| } | |
| function startAnimation2() | |
| { | |
| var x = document.getElementById("x2"); | |
| x.classList.add("animate"); | |
| } | |
</script> | |
| <div id="x1"> | |
| Hello how are you ? | |
| <br/> | |
| <button onclick="startAnimation()">click to start</button> | |
| </div> | |
| <br/> | |
| <div id="x2"> | |
| Hello how are you ? | |
| <br/> | |
| <button onclick="startAnimation2()">click to start</button> | |
| </div> | |
Post a Comment